<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="25%"
      :before-close="handleClose"
    >
      <el-form
        :model="formData"
        ref="ruleFormRef"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="上级菜单">
          <el-select v-model="formData.parentMenu" style="width: 85%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="formData.menuType">
            <el-radio :label="1">目录</el-radio>
            <el-radio :label="2">菜单</el-radio>
            <el-radio :label="3">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单图标">
          <span><img src="../icon/choose.png" alt="" /></span>
          <el-button type="primary" text>点击选择图标</el-button>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input
            v-model="formData.menuName"
            maxlength="10"
            show-word-limit
            style="width: 85%"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="formData.sort" type="number" style="width: 40%" />
        </el-form-item>
        <el-form-item label="菜单URL" prop="url" style="width: 89%">
          <el-input v-model="formData.url" />
        </el-form-item>
        <el-form-item label="菜单状态" prop="menuState">
          <el-radio-group v-model="formData.menuState">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2">警用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="onSubmit(ruleFormRef)"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { func } from "vue-types";

const props = defineProps(["title"]);

const dialogVisible = ref(false);
const formData = reactive({
  parentMenu: "",
  menuType: 1,
  menuName: "",
  sort: "",
  url: "",
  menuState: 1
});
const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  menuType: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
  menuName: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  sort: [{ required: true, message: "请输入排序号", trigger: "blur" }],
  url: [{ required: true, message: "请输入菜单URL", trigger: "blur" }],
  menuState: [{ required: true, message: "请选择菜单状态", trigger: "blur" }]
});

const options = [
  {
    label: "菜单1",
    value: 1
  },
  {
    label: "菜单2",
    value: 2
  },
  {
    label: "菜单3",
    value: 3
  }
];

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("确定关闭弹窗嘛?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

function cancel() {
  this.dialogVisible = false;
}

//暴露出值和方法，供父组件调用
defineExpose({
  dialogVisible
});
</script>

<style scoped></style>
